<script setup lang="tsx">
import { nextTick, reactive, ref } from 'vue';
// 接口
import { UUID } from 'uuidjs';
import {
  getLastinnerRightTableDataList,
  getLeftTableDataList,
  getRightTableDataList
} from '@/service/api/modules/trace/batch-read-code-info';
import SearchBox from './modules/search.vue';

const leftPage = ref({
  pageNum: 1,
  pageSize: 200
});

const searchParams = ref<any>({
  lotId: null,
  productName: null
});

const pagination = reactive({
  current: leftPage.value.pageNum,
  pageSize: leftPage.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: any, range) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    leftPage.value.pageNum = current;
    leftPage.value.pageSize = size;
    getLeftTableData();
  }
});

const leftAlignId = ref(null);

const leftTableData = ref([]);

// 左边
const leftcolumnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 50,
    align: 'center',
    checked: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '生产批号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productName',
    dataIndex: 'productName',
    title: '产品型号',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '批次数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打码数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printedCodeState',
    dataIndex: 'printedCodeState',
    title: '打码状态',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerCode',
    dataIndex: 'customerCode',
    title: '客户代码',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerName',
    dataIndex: 'customerName',
    title: '客户名称',
    width: 250,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '下发时间',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
// 中间表格
const rightcolumnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true
  },
  {
    key: 'modifiedEquipmentLineName',
    dataIndex: 'modifiedEquipmentLineName',
    title: '线体名称',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sumCode',
    dataIndex: 'sumCode',
    title: '打码数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'readingCount',
    dataIndex: 'readingCount',
    title: '读码数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'codeRate',
    dataIndex: 'codeRate',
    title: '读码率',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'firstDate',
    dataIndex: 'firstDate',
    title: '初次读码时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lastDate',
    dataIndex: 'lastDate',
    title: '最后读码时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
// 右边新增
const codereading = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true
  },
  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: 'PNL码',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'trackType',
    dataIndex: 'trackType',
    title: '动作类型',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      const obj = {
        TRACKIN: '上机',
        TRACKOUT: '下机'
      };
      return obj[record.trackType] || '';
    }
  },
  {
    key: 'sliceType',
    dataIndex: 'sliceType',
    title: '片型',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '读码时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

const leftTableLoading = ref(false);

function getLeftTableData() {
  const { lotId, woId, productName } = searchParams.value;
  const params: any = { lotId, woId, productName, ...leftPage.value };

  leftTableLoading.value = true;
  getLeftTableDataList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: any) => {
          item.index = index + 1;
          item.uid = UUID.genV4().hexNoDelim;
        });
        pagination.total = data.total;
        leftTableData.value = data.list;
      }
    })
    .finally(() => (leftTableLoading.value = false));
}

// getLeftTableData();最左边表格的重置
function reset() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}

const rightTableData = ref([]);
const rightTableLoading = ref(false);
// 左边
const customRow = (record: any) => {
  return {
    style: {
      background: record.uid === leftAlignId.value ? '#BAEAFA' : ''
    },
    class: record.uid === leftAlignId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      leftAlignId.value = record.uid;
      rightTableLoading.value = true;
      getRightTableDataList(record.lotId)
        .then(({ data, error }) => {
          if (!error) {
            data.forEach((item: any, index: any) => {
              item.index = index + 1;
              item.uid = UUID.genV4().hexNoDelim;
            });
            rightTableData.value = data;
          }
        })
        .finally(() => (rightTableLoading.value = false));
    }
  };
};

const currentRightId = ref(null);
const codereadData = ref([]);
const LastTableLoading = ref(false);

// 中间pnl
const rightCustomRow = (record: any) => {
  return {
    style: {
      background: record.uid === currentRightId.value ? '#BAEAFA' : ''
    },
    class: record.uid === currentRightId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRightId.value = record.uid;
      LastTableLoading.value = true;

      const obj = {
        lotId: null,
        pageSize: '9999',
        pageNum: '1',
        equipmentId: null
      };
      obj.lotId = record.lotId;
      obj.equipmentId = record.mainEqpId;

      // pnl表格接口
      getLastinnerRightTableDataList(obj)
        .then(({ data, error }) => {
          if (!error) {
            data.list.forEach((item, index) => {
              item.index = index + 1;
              item.uid = UUID.genV4().hexNoDelim;
            });
            console.log(data);
            codereadData.value = data.list;
          }
        })
        .finally(() => (LastTableLoading.value = false));
    }
  };
};
// 右边
const lastRightId = ref(null);
// 最右边
const LastCustomRow = (record: any) => {
  return {
    style: {
      background: record.uid === lastRightId.value ? '#BAEAFA' : ''
    },
    class: record.uid === lastRightId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      lastRightId.value = record.uid;
    }
  };
};

function search() {
  leftPage.value.pageNum = 1;
  pagination.current = 1;
  getLeftTableData();
}
getLeftTableData();

const searchHeight = ref(42);

window.addEventListener('resize', () => {
  nextTick(() => {
    const ele = document.querySelector('.outer-printed-code .search-box');
    const height = ele?.clientHeight;
    searchHeight.value = height || 42;
  });
});
</script>

<template>
  <div
    class="jl-main-page outer-printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <SearchBox v-model:model="searchParams" class="search-box" @reset="reset" @search="search" />
    <!-- 左边 -->
    <ARow :gutter="[15, 8]" wrap class="w-full" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <ACol :span="8" class="h-full" style="padding-right: 0 !important">
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="leftcolumnChecks" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="leftcolumnChecks"
            :data-source="leftTableData"
            bordered
            size="small"
            :loading="leftTableLoading"
            row-key="uid"
            :pagination="pagination"
            :scroll="{ x: 1200, y: 2000 }"
            class="h-full"
            :row-height="23"
            :custom-row="customRow"
          />
        </ACard>
      </ACol>
      <!-- 中 -->
      <ACol
        :span="8"
        class="h-fullmin-h-500px h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
        style="padding-left: 0 !important"
      >
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="rightcolumnChecks" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="rightcolumnChecks"
            :data-source="rightTableData"
            bordered
            size="small"
            :loading="rightTableLoading"
            row-key="uid"
            :pagination="false"
            class="h-full"
            :row-height="23"
            :custom-row="rightCustomRow"
          />
        </ACard>
      </ACol>
      <!-- 内层右边 -->
      <ACol
        :span="8"
        class="h-fullmin-h-500px h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
        style="padding-left: 0 !important"
      >
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="codereading" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="codereading"
            :data-source="codereadData"
            bordered
            size="small"
            :loading="LastTableLoading"
            row-key="uid"
            :pagination="false"
            class="h-full"
            :row-height="23"
            :custom-row="LastCustomRow"
          />
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped></style>
